<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Menu</title>
    <meta http-equiv="Content-language" content="zh-CN" />
    <style type="text/css" media="all">
        * { padding:0; margin:0; }
		body { overflow:hidden; }
		#top { height:68px; _height:70px; border:1px solid #2cb0c7; }
		#left { float:left; width:210px; }
		#right { overflow:hidden; }
		#main { width:100%; _margin-left:-3px; }
		#resizebar { border-right:1px #2cb0c7 solid; float:right; width:3px; _width:4px; height:100%; cursor:e-resize; background:white; }
        #menu { float:left; overflow:hidden; border:1px solid #2cb0c7; }
        #menu li ul { height:auto; overflow:hidden; overflow-y:auto; display:none; font-weight:normal; }
		#menu li { overflow:hidden; height:22px; _height:23px; line-height:22px; margin:0; list-style:none; padding:0 0 1px 0; }
		#menu li li { padding:1px 0 0 0; height:auto; }
        #menu li .container { color:white; cursor:pointer; font-size:18px; height:22px; line-height:23px\0; display:block; background:#2cb0c7; padding-left:9px; }
        #menu li li .container { color:#ff4400; font-size:16px; padding-left:18px; }
		#menu li li a { color:blue; height:22px; text-decoration:none; display:block; font-size:14px; padding-left:18px; background:none; }
		#menu li li li a { padding-left:27px; }
		#menu li li .container, #menu li li a { background:white; }
		#menu li li div:hover, #menu li li a:hover, #menu li li .current { background:#d2ffff; }
    </style>
</head>
<body>
<div id="page">
	<div id="top">
	</div>
	<div>
		<div id="left">
			<div id="resizebar"></div>
			<ul id="menu">
				<li>
					<div class="container">test</div>
					<ul>
						<li> <a href="http://www.baidu.com">baidu</a> </li>
						<li> <a href="http://www.google.com">google</a> </li>
					</ul>
				</li>
			</ul>
		</div>
		<div id="right">
			<iframe id="main" src="" frameborder="0"></iframe>
		</div>
	</div>
</div><!-- Page end! -->
<script type="text/javascript" src="tree.js"></script>
<script type="text/javascript">
//<![CDATA[
var data = {
	'Web1':{
		search:{baidu:'http://www.baidu.com', soso:'http://www.soso.com'},
		conblogs:'http://www.cnblogs.com',
		'popup':'./popup.html'
	},
	'Web2':{
		search:{baidu:'http://www.baidu.com', soso:'http://www.soso.com'},
		conblogs:'http://www.cnblogs.com',
		'163':'http://163.com'
	},
	'Web3':{
		search:{baidu:'http://www.baidu.com', soso:'http://www.soso.com'},
		conblogs:'http://www.cnblogs.com',
		'163':'http://163.com'
	},
	'Web4':{
		search1:{baidu:'http://www.baidu.com', soso:'http://www.soso.com'},
		conblogs1:'http://www.cnblogs.com',
		'163a':'http://163.com',
		search2:{baidu:'http://www.baidu.com', soso:'http://www.soso.com'},
		conblogs2:'http://www.cnblogs.com',
		'163b':'http://163.com',
		search3:{baidu:'http://www.baidu.com', soso:'http://www.soso.com'},
		conblogs3:'http://www.cnblogs.com',
		'163c':'http://163.com',
		search4:{baidu:'http://www.baidu.com', soso:'http://www.soso.com'},
		conblogs4:'http://www.cnblogs.com',
		'163d':'http://163.com',
		search5:{baidu:'http://www.baidu.com', soso:'http://www.soso.com'},
		conblogs5:'http://www.cnblogs.com',
		'163e':'http://163.com',
		search6:{baidu:'http://www.baidu.com', soso:'http://www.soso.com'},
		conblogs6:'http://www.cnblogs.com',
		'163f':'http://163.com',
		search7:{baidu:'http://www.baidu.com', soso:'http://www.soso.com'},
		conblogs7:'http://www.cnblogs.com',
		'163g':'http://163.com',
		search8:{baidu:'http://www.baidu.com', soso:'http://www.soso.com'},
		conblogs8:'http://www.cnblogs.com',
		'163h':'http://163.com',
		search9:{baidu:'http://www.baidu.com', soso:'http://www.soso.com'},
		conblogs9:'http://www.cnblogs.com',
		'163k':'http://163.com'
	}
};

var toper = document.getElementById("top");
var left  = document.getElementById("left");
var main  = document.getElementById("main");
tree(toper, left, main, data);
//]]>
</script>
</body>
</html>
